import 'package:flutter/material.dart';

class PhotoSetting extends StatefulWidget {
  const PhotoSetting({super.key});

  @override
  State<PhotoSetting> createState() => _PhotoSettingState();
}

class _PhotoSettingState extends State<PhotoSetting> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        actions: [
          Container(
            margin: EdgeInsets.symmetric(horizontal: 30),
            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
                border: Border.all(
                  color: Color(0xffFF876B),
                )),
            child: Text(
              'Next',
              style: TextStyle(
                color: Color(0xffFF876B),
              ),
            ),
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 15.0, bottom: 50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            PhotoImg(size: size),
            const Expanded(
                child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'Filter',
                style: TextStyle(fontSize: 18),
              ),
            )),
            const SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  PhotoFilteritem(
                    img: 'assets/image4.png',
                    text: 'Sarah Morgan',
                  ),
                  PhotoFilteritem(
                    img: 'assets/image5.png',
                    text: 'The monkey',
                  ),
                  PhotoFilteritem(
                    img: 'assets/image6.png',
                    text: 'Curabiturt',
                  ),
                  PhotoFilteritem(
                    img: 'assets/image4.png',
                    text: 'Sarah Morgan',
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class PhotoImg extends StatelessWidget {
  const PhotoImg({
    super.key,
    required this.size,
  });

  final Size size;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: size.height / 1.8,
      width: size.width - 30,
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white, width: 8),
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withOpacity(0.05),
                offset: const Offset(0, 12),
                blurRadius: 30)
          ]),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Image.asset(
          'assets/image3.png',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

class PhotoFilteritem extends StatelessWidget {
  final String img;
  final String text;
  const PhotoFilteritem({
    super.key,
    required this.img,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 107,
      height: 132,
      margin: const EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(),
      child: Column(
        children: [
          Container(
            width: 105,
            height: 105,
            decoration: BoxDecoration(
                border: Border.all(color: Color(0xff4A4A4A)),
                borderRadius: BorderRadius.circular(10)),
            child: Image.asset(
              img,
              scale: 0.9,
            ),
          ),
          const SizedBox(
            height: 5,
          ),
          Text(text)
        ],
      ),
    );
  }
}
